<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <nav class="tab" v-show="!$route.meta.isTab">
    <RouterLink active-class="active" class="tab-link" to="/film">
      <i class="fa fa-youtube-play" style="font-size: 20px"></i>
      <span>电影</span>
    </RouterLink>
    <RouterLink active-class="active" class="tab-link" to="/cinema">
      <i class="fa fa-desktop" style="font-size: 20px"></i>
      <span>影院</span>
    </RouterLink>
    <RouterLink active-class="active" class="tab-link" to="/news">
      <i class="fa fa-commenting-o" style="font-size: 20px"></i>
      <span>资讯</span>
    </RouterLink>
    <RouterLink active-class="active" class="tab-link" to="/mine">
      <i class="fa fa-user-o" style="font-size: 20px"></i>
      <span>我的</span>
    </RouterLink>
  </nav>
  
  <div class="container">
    <router-view v-slot="{ Component }">
      <!-- 动画过渡模式 先切走 再切入 -->
      <transition name="slide-fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>


<style lang="less" scoped>
.tab {
  width: 100%;
  height: 49px;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  border-top: 1px solid #ccc;
  display: flex;
  .tab-link {
    flex-grow: 1;
    text-align: center;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .active {
    color: orange;
  }
}
.container {
  width: 100%;
  height: 93%;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: hidden;
}
/* 定义组件切换动画 */
/* 组件入场动画 + 组件离场动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.5s ease;
}

/* 组件进入之前 + 组件离去以后的状态 */
.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
// .fade-enter-active,
// .fade-leave-active {
//   transition: opacity 0.5s ease;
// }

// .fade-enter-from,
// .fade-leave-to {
//   opacity: 0;
// }
</style>